<template>
    <div class="home">
        <!-- <van-sticky>
            <div class="top">
                <div class="AppTitle">Muisc</div>
                <input  type="text" placeholder="搜索歌曲、MV、歌手">
            </div>
        </van-sticky> -->

        <van-icon name="search" class="search" 
        size="20"
        color="#fff"
        @click="$router.push('/search?type=' + active)"/>
        
    
        <van-tabs v-model="active" background="var(--homeTop)"
        swipeable
        animated
        color="var(--homeTop)" title-active-color="#fff" title-inactive-color="#ddd">
            <van-tab :title="item.title" v-for="(item, index) in Home.list" :key="index">
                <concentration :data="item"/>
            </van-tab>
        </van-tabs>
        <!-- <recommend/> -->
    </div>
</template>

<script>
import recommend from './recommend'
import concentration from './concentration.vue';
import { mapState, mapMutations } from 'vuex'
export default {
    components : {
        recommend,
        concentration
    },
    data() {
        return {
          active : 0,
        };
    },
    computed : {
        ...mapState(['Home'])
    },
    created() {
    },
    //vue解析完成并且把初始虚拟DOM放入页面后调用
    mounted() {},
    methods: {
        getRed(){
        }
    },
};
</script>

<style scoped>
.home {
    position: absolute;
    background: #f8f8f8;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
.home::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 170px;
    background: linear-gradient(var(--homeTop), var(--homeTop), #f8f8f8);;
}
.top{
    position: relative;
    width: 100%;
    height: 60px;
    background: var(--homeTop);
    display: flex;
    justify-content: center;
    align-items: center;
}
.top input{
    width: 65%;
    height: 26px;
    padding: 0 10px;
    border-radius: 15px;
}
.top .AppTitle{
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    margin-right: 10px;
}
.home >>> .van-tabs__wrap {
    display: flex;
    justify-content: center;
    width: calc(100% - 60px);
    overflow-x: scroll;
    overflow-y: hidden;
}
.home >>> .van-tabs__nav {
}
.home >>> .van-tab{
    padding: 0 30px;
}
.kkry{
    text-align: center;
    line-height: 40px;
    font-size: 14px;
}

.search{
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 999;
}


</style>
